<!--
 * @Descripttion: 
 * @version: 版本
 * @Author: Simon
 * @Date: 2021-04-12 18:00:35
 * @LastEditors: Simon
 * @LastEditTime: 2021-04-16 15:55:05
-->
<template>
  <div class="License">
    <div class="page-head">
      <div class="page-bread">
        <div class="bread-prev" @click="back">
          资源管理
        </div>
        <div class="bread-divider">
          /
        </div>
        <div class="bread-now">
          标签管理
        </div>
      </div>
      <div class="between-start">
        <!-- <search-input placeholder="标签名称" @search="searchChange" /> -->
        <div class="page-tool">
          <div class="tool-btn" @click="open('add')">新增标签</div>
        </div>
      </div>
    </div>
    <div class="page-body">
      <div class="media-list">
        <el-scrollbar class="scroll-bar">
          <el-row>
            <el-col v-for="(item, i) in list" :key="i" :span="4">
              <el-card class="box-card">
                <div class="tagItem">
                  <img src="~assets/img/tag.png" alt="">
                  <div class="text">
                    <h5>{{item.name}}</h5>
                  </div>
                  <span class="cpo" style="color:red" @click="doDelete(item)">删除</span>
                </div>
              </el-card>
            </el-col>
          </el-row>  
          
        </el-scrollbar>
      </div>
      <div class="page-footer">
        
      </div>
    </div>
    <!-- 新增和修改弹框 -->
    <el-dialog :visible.sync="model.visible" width="450px" :title="model.type==='add'?'新增标签':'修改标签'">
      <div class="dialog-body">
        <el-form ref="form" :model="form" label-width="120px" label-position="left">
          <el-form-item label="标签名称" class="required">
            <el-input
              name="tagname"
              v-model="form.name"
              placeholder="请输入标签名称"
              v-validate="'required'"
              maxlength="6"
              show-word-limit
            />
            <div v-show="errors.has('tagname')" class="el-form-item__error">
              {{ errors.first("tagname") }}
            </div>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="close">取 消</el-button>
        <el-button type="primary" @click="submit(model.type)">确 定</el-button>
      </span>
    </el-dialog>


      <!-- 删除弹窗 -->
    <el-dialog
      :visible.sync="visibility"
      width="430px"
      height="100px"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="dialog-content comfirm-body">
        <img class="comfirm-ico"
             src="~assets/img/warning.png">
        <div class="comfirm-txt">
          <div>
            {{txt}}
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="visibility = false">取 消</el-button>
        <el-button type="primary" @click="tagDelete">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import * as api from "@/api"
export default {
  data() {
    return {
      model:{
        visible:false,
        type:'add'
      },
      visibility: false,
      txt: '确定删除该条数据？',
      form:{
        name:''
      },
      search:'',
      tag_id:'',
      list:[]
    }
  },
  methods:{
    back() {
      this.$router.go(-1)
    },
    // searchChange(e) {
    //   this.search = e;
    //   this.tagList();
    // },

    open(val) {
      this.$validator.reset()
      this.model.visible = true
      this.model.type = val
    },
    close() {
      this.model.visible = false
      this.form.name = ''
    },
    /**删除标签 */
    doDelete(row) {
      this.tag_id = row.tag_id;
      this.txt = row.isuse ? '该标签正在使用，确定删除？' : '确定删除该条数据？'
      this.visibility = true;
    },
    submit() {
      this.$validator.validateAll().then((valid) => {
        if (valid) {
          this.addOrEdit();
        } else {
          this.$message.warning("有信息未填写正确");
        }
      })
    },
    async tagList() {
      const { code, data } = await api.tag(this).tagList({
        offset: 0,
        limit: -1,
      })
      if (code === 0) {
       this.list = data
      }
    },

    async addOrEdit() {
      let fn = this.model.type === "add" ? "tagAdd" : "tagUpdate";
      const { code } = await api.tag(this)[fn](this.form, this.column_id);
      if (code === 0) {
        this.$message.success("操作成功");
        this.close();
        this.tagList();
      }
    },

    async tagDelete() {
      const { code } = await api.tag(this).tagDelete(this.tag_id);
      if (code === 0) {
        this.$message.success("操作成功");
        this.tag_id = "";
        this.visibility = false;
        if (this.total % this.limit === 1) {
          if (this.offset >= this.limit) {
            this.offset -= this.limit;
          }
        }
        this.tagList();
      }
    },
  },
  created() {
    this.tagList()
  },
}
</script>
<style lang="stylus" scoped>
.table_data {

}
.box-card {
  height: 80px;
  margin 0 15px 15px 0
}
.tagItem {
  height 40px
  display: flex
  justify-content:space-between
  align-items center
  .text {
    flex 1
    margin-left 10px
  }
  h5 {
    margin 0
  }
}
</style>